"use client";

import { Box, HStack, Text, Wrap, WrapItem } from "@chakra-ui/react";
import { colorForCategory } from "@/lib/graphExtractor";

const CATEGORIES = [
  "DRUG",
  "DISEASE",
  "GENE_PROTEIN",
  "PATHWAY",
  "CLINICAL_TRIAL",
  "PATENT",
  "ORGANIZATION",
  "PUBMED_DOCUMENT",
  "CONDITION",
  "INTERVENTION",
];

const SHAPES: { key: string; label: string; svg: React.ReactNode }[] = [
  {
    key: "ellipse",
    label: "individual",
    svg: (
      <svg width="12" height="12" viewBox="0 0 12 12">
        <circle cx="6" cy="6" r="5" fill="#aeb7cc" />
      </svg>
    ),
  },
  {
    key: "square",
    label: "organization",
    svg: (
      <svg width="12" height="12" viewBox="0 0 12 12">
        <rect x="1" y="1" width="10" height="10" rx="2" fill="#aeb7cc" />
      </svg>
    ),
  },
  {
    key: "diamond",
    label: "document / patent",
    svg: (
      <svg width="12" height="12" viewBox="0 0 12 12">
        <path d="M6 1 L11 6 L6 11 L1 6 Z" fill="#aeb7cc" />
      </svg>
    ),
  },
  {
    key: "hexagon",
    label: "trial / phase",
    svg: (
      <svg width="12" height="12" viewBox="0 0 12 12">
        <path d="M3 1 L9 1 L11 6 L9 11 L3 11 L1 6 Z" fill="#aeb7cc" />
      </svg>
    ),
  },
];

export function GraphLegend() {
  return (
    <Box px={4} py={2.5}>
      <HStack spacing={2} mb={1.5} align="center">
        <Text fontSize="10px" color="text.muted" textTransform="uppercase" letterSpacing="wider" minW="48px">
          shapes
        </Text>
        <Wrap spacing={3}>
          {SHAPES.map((s) => (
            <WrapItem key={s.key}>
              <HStack spacing={1.5}>
                {s.svg}
                <Text fontSize="10px" color="text.muted">
                  {s.label}
                </Text>
              </HStack>
            </WrapItem>
          ))}
        </Wrap>
      </HStack>
      <HStack spacing={2} align="center">
        <Text fontSize="10px" color="text.muted" textTransform="uppercase" letterSpacing="wider" minW="48px">
          colors
        </Text>
        <Wrap spacing={3}>
          {CATEGORIES.map((c) => (
            <WrapItem key={c}>
              <HStack spacing={1.5}>
                <Box
                  w="9px"
                  h="9px"
                  borderRadius="full"
                  bg={colorForCategory(c)}
                  boxShadow="0 0 6px currentColor"
                />
                <Text fontSize="10px" color="text.muted">
                  {c.replace("_", " ").toLowerCase()}
                </Text>
              </HStack>
            </WrapItem>
          ))}
        </Wrap>
      </HStack>
    </Box>
  );
}
